.el-aside {
    background-color: #000000; /* 黑色背景 */
    color: white; /* 白色字体 */
}

.el-row {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;

    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}

.Feature {
    font-weight: bold;
    justify-content: center;
    border: none; /* 去除边框 */
    border-radius: 5px; /* 设置圆角 */
    background-color: #000000; /* 设置背景色 */
    color: white; /* 设置文字颜色 */
    text-align: center; /* 文字居中对齐 */
    padding: 10px 20px; /* 设置按钮内边距 */
    font-size: 16px; /* 设置文字大小 */
    display: inline-block; /* 设置为行内块元素 */
}

.Feature:hover {
    background-color: #2f3fcb; /* 鼠标悬停时背景色变为蓝色 */
}

.Feature.active {
    background-color: #4A58EC; /* 高亮背景色 */
}

.el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
}

.slide-enter-active,
.slide-leave-active {
    transition: all 0.5s ease;
}

.slide-enter-from,
.slide-leave-to {
    transform: translateX(-200px);
}


.slide-enter-to,
.slide-leave {
    transform: translateX(0);
}

.slide-enter-to,
.slide-leave-from {
    transform: translateX(0);
}
/* 添加一个新的过渡类用于el-main区域 */
.fade-slide {
    opacity: 1;
    transition: all 0.5s ease;
}

.slide-enter-active .fade-slide,
.slide-leave-active .fade-slide {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.slide-enter .fade-slide,
.slide-leave-to .fade-slide {
    opacity: 0;
}

/* 如果需要平移效果，可以根据侧边栏宽度调整transform值 */
.slide-enter .fade-slide,
.slide-leave-to .fade-slide {
    transform: translateX(200px); /* 这里假设侧边栏宽度为200px */
}
